<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>

	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
	<link rel="stylesheet" type="text/css" href="css/myStyle.css" />

</h:head>
<h:body>
	<ui:composition template="/template/layout.xhtml">
		<br />
		<br />
		<ui:define name="content">
			<h:form id="mainForm">
				<br />
				<br />
				<p:commandButton value="Agregar Familia" onsuccess="dlg.show()"
					update=":familyForm" ajax="true" immediate="true"
					action="#{familyMB.initDialog}" />
				<br />
				<br />

				<p:dataTable id="familyList" var="fam" style="width:510px;"
					value="#{familyMB.familiesDataModel}" widgetVar="familyTable"
					paginator="true" rows="10" selection="#{familyMB.family}"
					selectionMode="single" emptyMessage="No se encontraron registros">
					<p:ajax event="rowSelect" listener="#{familyMB.onRowSelect}"
						update=":familyForm" oncomplete="dlg.show()" />
					<p:ajax event="rowUnselect" listener="#{familyMB.onRowUnselect}" />
					<p:column id="firstColumn" headerText="Primer Apellido"
						sortBy="#{fam.firstName}">
						<h:outputText value="#{fam.firstName}" />
					</p:column>

					<p:column id="lastColumn" headerText="Segundo Apellido"
						sortBy="#{fam.lastName}">
						<h:outputText value="#{fam.lastName}" />
					</p:column>

					<p:column headerText="Hijos">
						<h:outputText value="#{fam.kids}" />
					</p:column>

					<p:column>
						<p:commandButton icon="ui-icon-trash" action="#{familyMB.delete}"
							update="familyList">
							<f:setPropertyActionListener value="#{fam}"
								target="#{familyMB.family}" />
						</p:commandButton>
					</p:column>
				</p:dataTable>

			</h:form>
			<p:dialog widgetVar="dlg" width="700px" maximizable="false"
				header="Familia">
				<h:form id="familyForm">
					<h:panelGrid id="familyPanel" columns="5">

						<p:outputLabel for="firstName" value="Primer Apellido" />
						<p:inputText id="firstName" value="#{familyMB.family.firstName}" />
						<p:spacer width="20" />
						<p:outputLabel for="lastName" value="Segundo Apellido" />
						<p:inputText id="lastName" value="#{familyMB.family.lastName}" />

						<p:outputLabel for="street" value="Calle" />
						<p:inputText id="street" value="#{familyMB.family.street}" />
						<p:spacer width="20" />
						<p:outputLabel for="number" value="Numero" />
						<p:inputText id="number" value="#{familyMB.family.number}" />

						<p:outputLabel for="colony" value="Colonia" />
						<p:inputText id="colony" value="#{familyMB.family.colony}" />
						<p:spacer width="20" />
						<p:outputLabel for="postalCode" value="CP" />
						<p:inputText id="postalCode" value="#{familyMB.family.postalCode}" />

						<p:outputLabel for="city" value="Ciudad" />
						<p:inputText id="city" value="#{familyMB.family.city}" />
						<p:spacer width="20" />
						<p:outputLabel for="phone" value="Telefono casa" />
						<p:inputText id="phone" value="#{familyMB.family.phone}" />

					</h:panelGrid>
					<h:panelGrid columns="3">
						<h:panelGrid columns="2">
							<f:facet name="header">
								Padre
							</f:facet>
							<p:outputLabel for="fatherName" value="Nombre Completo" />
							<p:inputText id="fatherName"
								value="#{familyMB.family.father.fullName}" />

							<p:outputLabel for="fatherMail" value="Correo Electronico" />
							<p:inputText id="fatherMail"
								value="#{familyMB.family.father.mail}" />

							<p:outputLabel for="fatherWorkPhone" value="Telefono Trabajo" />
							<p:inputText id="fatherWorkPhone"
								value="#{familyMB.family.father.workPhone}" />

							<p:outputLabel for="fatherMobilePhone" value="Telefono Movil" />
							<p:inputText id="fatherMobilePhone"
								value="#{familyMB.family.father.mobile}" />

							<p:outputLabel for="fatherOcupation" value="Ocupacion" />
							<p:inputText id="fatherOcupation"
								value="#{familyMB.family.father.ocupation}" />
						</h:panelGrid>
						<p:spacer width="20" />
						<h:panelGrid columns="2">
							<f:facet name="header">
								Madre
							</f:facet>
							<p:outputLabel for="motherName" value="Nombre Completo" />
							<p:inputText id="motherName"
								value="#{familyMB.family.mother.fullName}" />

							<p:outputLabel for="motherMail" value="Correo Electronico" />
							<p:inputText id="motherMail"
								value="#{familyMB.family.mother.mail}" />

							<p:outputLabel for="motherWorkPhone" value="Telefono Trabajo" />
							<p:inputText id="motherWorkPhone"
								value="#{familyMB.family.mother.workPhone}" />

							<p:outputLabel for="motherMobilePhone" value="Telefono Movil" />
							<p:inputText id="motherMobilePhone"
								value="#{familyMB.family.mother.mobile}" />

							<p:outputLabel for="motherOcupation" value="Ocupacion" />
							<p:inputText id="motherOcupation"
								value="#{familyMB.family.mother.ocupation}" />
						</h:panelGrid>
					</h:panelGrid>

					<p:fieldset id="container" legend="Hijos">
						<h:panelGrid id="kidPanel" columns="5">
							<p:outputLabel for="kidName" value="Nombres (sin apellidos)" />
							<p:inputText id="kidName" value="#{familyMB.kid.name}"
								>
							</p:inputText>
							<p:spacer width="20" />
							<p:outputLabel for="kidGender" value="Genero" />
							<p:selectOneMenu id="kidGender" value="#{familyMB.kid.gender}"
								>
								<f:selectItem itemLabel="Selecciona" itemValue="Selecciona"
									noSelectionOption="true" />
								<f:selectItem itemLabel="Femenino" itemValue="Femenino" />
								<f:selectItem itemLabel="Masculino" itemValue="Masculino" />
							</p:selectOneMenu>

							<p:outputLabel for="kidAge" value="Edad" />
							<p:inputText id="kidAge" value="#{familyMB.kid.age}"
								>
							</p:inputText>
							<p:spacer width="20" />
							<p:outputLabel for="kidBirthDay" value="Fecha de Nacimiento" />
							<p:calendar id="kidBirthDay" value="#{familyMB.kid.birthDay}" 
								navigator="true" maxdate="#{familyMB.today}" readonly="true" 
								mode="popup" showOn="button" pattern="dd/MM/yyyy"/>

							<p:outputLabel for="previousSchool" value="Escuela Procedencia" />
							<p:inputText id="previousSchool" value="#{familyMB.kid.previousSchool}"
								>
							</p:inputText>
							<p:spacer width="20" />
							<p:outputLabel for="mobile" value="Celular" />
							<p:inputText id="mobile" value="#{familyMB.kid.mobile}"
								>
							</p:inputText>
							
							<p:outputLabel for="curp" value="CURP" />
							<p:inputText id="curp" value="#{familyMB.kid.curp}"
								>
							</p:inputText>
							<p:spacer width="20" />
							<p:outputLabel for="grade" value="Grado a cursar" />
							<p:inputText id="grade" value="#{familyMB.kid.grade}"
								>
							</p:inputText>
							
							<p:commandButton id="btn_add" value="Agregar" immediate="true"
								 ajax="true"
								update="kidsPanel @parent" action="#{familyMB.reinit}">
								<p:collector value="#{familyMB.kid}"
									addTo="#{familyMB.family.kids}" />
							</p:commandButton>
						</h:panelGrid>
						<br />
						<p:outputPanel id="kidsPanel">
							<p:dataTable id="kidsTable" value="#{familyMB.family.kids}"
								var="kid" emptyMessage="No se encontraron registros">
								<p:column>
									<f:facet name="header">
										<h:outputText value="Nombre" />
									</f:facet>
									<h:outputText value="#{kid.name}" />
								</p:column>
								<p:column>
									<f:facet name="header">
										<h:outputText value="Edad" />
									</f:facet>
									<h:outputText value="#{kid.age}" />
								</p:column>
								<p:column>
									<f:facet name="header">
										<h:outputText value="Grado" />
									</f:facet>
									<h:outputText value="#{kid.grade}" />
								</p:column>
								<p:column>
									<p:commandLink value="Eliminar" update=":familyForm:kidsPanel"
										process=":familyForm:kidsPanel">
										<p:collector value="#{kid}" removeFrom="#{familyMB.family.kids}" />
									</p:commandLink>
								</p:column>
							</p:dataTable>
						</p:outputPanel>
					</p:fieldset>
					<br />
					<br />
					<p:commandButton id="saveButton" value="Guardar"
						action="#{familyMB.save}" immediate="true"
						update=":mainForm:familyList" onsuccess="dlg.hide()" />
				</h:form>
			</p:dialog>
		</ui:define>
	</ui:composition>
</h:body>
</html>